<template>
<!--pages/company/company.ttml-->
<view class="content">
   <view class="hr"></view>
   <view class="item">
    <text>项目名称：</text>
     <input type="text" @input="pojectTitle" placeholder="请输入项目名称" placeholder-class="holder" bingblur="accountblur"></input>
   </view>

   <view class="item">
   <text>开工时间：</text>
    <picker class="picker" mode="date" :value="startTime" start="1997-09-01" end="2023-09-01" @change="bindStartTimeChange" fields="day">
      <view class="picker">
        {{startTime}}
      </view>
    </picker>
   </view>
  <view class="item">
  <text>完工时间：</text>
    <picker class="picker" mode="date" :value="endTime" start="1997-09-01" end="2023-09-01" @change="bindEndTimeChange" fields="day">
      <view class="picker">
        {{endTime}}
      </view>
    </picker>
   </view>
   <view class="item">
      <text>所在地区：</text>
      <input type="text" @input="area" placeholder="所在地区" placeholder-class="holder"></input>
   </view>

   <view class="item">
      <text>项目详情：</text>
      <!-- <input type="number" bindinput="projectDetail" placeholder="项目详情" placeholder-class="holder" /> -->
      <view class="cell__bd">
        <!-- 多行输入框 -->
        <textarea class="weui-textarea" placeholder="请输入项目详情正文内容。" maxlength="500" placeholder-style="color:#b3b3b3;font-size:14px;" style="height: 12rem" @input="handleContentInput"></textarea>
        <!-- 正文输入字数统计 -->
        <view class="weui-textarea-counter">{{contentCount}}/500</view>
      </view>
   </view>
   <view class="button">
      <button type="primary" plain size="mini" @tap="saveAnd">保存继续添加</button>
      <button type="primary" size="mini" @tap="save">确认保存</button>
   </view>
</view>
</template>

<script>
// pages/ucenter/project/project.js
let app = getApp();

export default {
  data() {
    return {
      startTime: "",
      endTime: "",
      contentCount: 0,
      content: '',
      form: {
        pojectTitle: "",
        startTime: "",
        endTime: "",
        area: "",
        projectDetail: ""
      }
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {},
  methods: {
    bindStartTimeChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.detail.value);
      let form = this.form;
      form.startTime = e.detail.value;
      this.setData({
        form,
        startTime: e.detail.value
      });
    },
    bindEndTimeChange: function (e) {
      console.log("picker发送选择改变，携带值为", e.detail.value);
      let form = this.form;
      form.endTime = e.detail.value;
      this.setData({
        form,
        endTime: e.detail.value
      });
    },

    pojectTitle(e) {
      let form = this.form;
      console.log(e);
      form.pojectTitle = e.detail.value;
      this.setData({
        form
      });
    },

    area(e) {
      let form = this.form;
      console.log(e);
      form.area = e.detail.value;
      this.setData({
        form
      });
    },

    projectDetail(e) {
      let form = this.form;
      console.log(e);
      form.projectDetail = e.detail.value;
      this.setData({
        form
      });
    },

    saveAnd(e) {
      this.commit();
      uni.navigateTo({
        url: '/pages/ucenter/project/project'
      });
    },

    save(e) {
      this.commit();
      uni.navigateTo({
        url: '/pages/ucenter/recruit/recruit'
      });
    },

    commit(e) {
      var that = this;
      uni.request({
        url: `${app.globalData.baseUrl}/mallappletbackstage/project-experience/addProject/${uni.getStorageSync('openid')}`,
        method: "POST",
        data: that.form,
        success: res => {
          uni.showToast({
            title: '提交成功',
            icon: 'none',
            duration: 4000
          });
        }
      });
    },

    handleContentInput(e) {
      let form = this.form;
      form.projectDetail = e.detail.value;
      this.setData({
        form,
        contentCount: e.detail.value.length
      });
    }

  }
};
</script>
<style>
/* pages/company/company.ttss */
.content{
  width: 100%;
  height: 700px;
  background-color: #f2f2f2;
}
.hr{
  padding-top: 40px;
}
.item{
  background: #ffffff;
  width: 96%;
  height: 100rpx;
  line-height: 100rpx;
  margin: 2%;
  padding: 0rpx 20rpx;
}
.item text {
  float: left;
  height: 100rpx;
  width: 25%;
}
.item input{
  float: left;
  height: 100rpx;
  width: 75%;
}
.cell__bd{
  float: left;
  width: 100%;
}
.holder{
  font-size: 14px;
  color: #999999;
}
.flex{
  display: flex;
  flex-direction: row;
}
.flex input{
  width: 300px;
}
item switch{
  margin-top: 5px;
  margin-right: 5px;
}
.mobileInfo{
  display: flex;
  flex-direction: row;
}
.mobile{
  margin: 0 auto;
  border: 1px solid #cccccc;
  height: 40px;
  width: 50%;
  border-radius: 3px;
  background-color: #ffffff;
  margin-bottom: 15px;
  display: flex;
  flex-direction: row;
  margin-left: 5%; 
}
.mobile input{
  margin-top: 8px;
  margin-left: 10px;
}
.code{
  border: 1px solid #cccccc;
  height: 40px;
  width: 35%;
  background-color: #edeeec;
  border-radius: 3px;
  text-align: center;
  margin-left: 10px;
  line-height: 40px;
  color: #999999;
  font-size: 15px;
  margin-bottom: 15px;
  margin-right: 5%; 
}
.btn{
  width: 90%;
  color: #999999;
  margin-top: 40px;
}
.xieyi{
  margin-top: 15px;
  margin-left: 15px;
  font-size: 13px;
}
.agree{
  margin-left: 5px;
  color: #666666; 
}
.opinion{
  color: red;
  font-weight: bold;
  text-decoration: underline;
}
.picker{
  height: 90rpx;
}
.button {
  display:flex;
  align-items:center;
  width: 100%;
}
.button button {
  padding: 10rpx 20rpx;
  margin: 10rpx 20rpx;
  flex: 1;
}

</style>